<!DOCTYPE html>
<html lang="zh">

<head>

    <meta charset="utf-8">
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=yes">
    <meta name="description" content="This is a developing blog site.">
    <meta name="author" content="Jerry Chaos">
    <meta name="applicable-device" content="pc,pad,mobile">
    <meta name="keywords" content="slog,blog,computer,program">
    <meta name="referrer" content="always">
    <title>Jerry Chaos</title>
    <link href="./css/output.css" rel="stylesheet" type="text/css" />
    <link href="./css/highlight.js/default.min.css" rel="stylesheet" type="text/css" />
    <link href="../content/www/css/output.css" rel="stylesheet" type="text/css" />
</head>

<body class="scrollbar min-h-screen min-w-full overflow-x-hidden overflow-y-show"
    style="font-family: 'Lato', sans-serif">

    <!-- <div class="fixed min-h-screen min-w-[100vw] text-[10rem] text-gray-200 -z-10 grid items-center justify-center">
        SLOG
    </div> -->

    <div class="grid grid-cols-[auto_1fr] grid-rows-[20px_1fr_50px]" style="
        grid-template-areas: 'sidebar crumbs' 'sidebar main' 'sidebar footer';
      ">


        <div id="ID_sidebar" class="shadow-lg flex min-h-screen max-h-screen sticky top-0"
            style="grid-area: sidebar; width: 300px;">
            <div id="ID_sidebar_menu" class="bg-slate-600">
                <div sidebar-menu-list class="flex flex-col">
                    <button type="button" data-slog-menu="toggle" class="p-2 m-1 hover:bg-slate-500 rounded-md"
                        title="Toggle">
                        <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"
                            xmlns="http://www.w3.org/2000/svg">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                d="M11 19l-7-7 7-7m8 14l-7-7 7-7"></path>
                        </svg>

                        <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"
                            xmlns="http://www.w3.org/2000/svg">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                d="M13 5l7 7-7 7M5 5l7 7-7 7"></path>
                        </svg>
                    </button>
                    <button type="button" data-slog-menu="search" class="p-2 m-1 hover:bg-slate-500 rounded-md"
                        title="Search">
                        <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"
                            xmlns="http://www.w3.org/2000/svg">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path>
                        </svg>
                    </button>
                    <button type="button" data-slog-menu="new" class="p-2 m-1 hover:bg-slate-500 rounded-md"
                        title="New Article">
                        <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"
                            xmlns="http://www.w3.org/2000/svg">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                d="M7 21h10a2 2 0 002-2V9.414a1 1 0 00-.293-.707l-5.414-5.414A1 1 0 0012.586 3H7a2 2 0 00-2 2v14a2 2 0 002 2z">
                            </path>
                        </svg>
                    </button>
                    <button type="button" data-slog-menu="setting" class="p-2 m-1 hover:bg-slate-500 rounded-md"
                        title="Setting">
                        <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"
                            xmlns="http://www.w3.org/2000/svg">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z">
                            </path>
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path>
                        </svg>
                    </button>
                </div>
            </div>

            <div id="ID_sidebar_content" class="scrollbar overflow-x-hidden overflow-y-show flex-1">
                <div id="ID_sidebar_content_tree"></div>
            </div>

            <div id="ID_sidebar_dragger" class="h-full absolute cursor-col-resize top-0 w-2 right-[-12px] select-none">
                <svg class="w-6 h-6 relative bottom-[-50vh] opacity-30 left-[-8px]" fill="none" stroke="currentColor"
                    viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                        d="M12 5v.01M12 12v.01M12 19v.01M12 6a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2z">
                    </path>
                </svg>
            </div>
        </div>

        <div class="mx-4 pt-3" style="grid-area: crumbs"></div>

        <main id="ID_main" class="px-5 grid grid-cols-[1fr_auto] grid-rows-[auto_auto_1fr]" style="
          grid-area: main;
          grid-template-areas: 'main-action main-action' 'main-summary main-toc' 'main-content main-toc';
        ">
            <div id="ID_main_action" class="flex text-gray-400" style="grid-area:main-action">
                <div page-action>
                    <button type="button" class="px-2 hover:text-gray-500" href="javascript:;" page-property>
                        property
                    </button>
                    <button type="button" class="pl-2 hover:text-gray-500" href="javascript:;" page-create>
                        create
                    </button>
                </div>
            </div>

            <div id="ID_main_summary" class="text-slate-700" style="grid-area: main-summary">

                <label page-time class="block dark:text-gray-500">Released on January 13th, 2022</label>
                <h1 class="text-5xl mt-3 mb-5" page-title>page title</h1>
                <div class="mt-5 mb-2 italic" page-desc>
                    Businesses: support continued development and maintenance via
                    invoiced technical support, maintenance, sponsoring
                    contracts:E-mail: contact @ dearimgui dot com. Individuals: support
                    continued development and maintenance here. Also see Sponsors page.
                </div>

                <div id="ID_main_summary_tag"> </div>
            </div>

            <div id="ID_main_toc" class="py-2 pl-5 pr-2 max-w-[300px] sticky top-0 h-fit" style="grid-area: main-toc">
                <div class="text-lg mb-3">On This Page</div>
                <div toc-content>
                    <ul class="text-slate-400 list-disc">
                        <li class="hover:text-slate-500">
                            <a href="javascript:;"> -scw-full m-0 p </a>
                        </li>
                        <li class="hover:text-slate-500">
                            <a href="javascript:;"> ID_mai_group </a>
                        </li>
                        <li class="hover:text-slate-500">
                            <a href="javascript:;"> roundroundroun sfsfsfs sfsf droundroundround </a>
                        </li>
                    </ul>
                    <ul class="text-slate-400 list-disc">
                        <li class="hover:text-slate-500">
                            <a href="javascript:;"> Hentent llo </a>
                        </li>
                        <li class="hover:text-slate-500">
                            <a href="javascript:;"> -scw-full m-0 p </a>
                        </li>
                        <li class="hover:text-slate-500">
                            <a href="javascript:;"> ID_mai_group </a>
                        </li>
                        <li class="hover:text-slate-500">
                            <a href="javascript:;"> roundroundroun sfsfsfs sfsf droundroundround </a>
                        </li>
                    </ul>
                </div>
            </div>

            <div id="ID_main_content" class="shadow-lg my-6 py-6" style="grid-area: main-content">

                <div id="ID_main_content_group" class="pl-2 pr-5 pb-6"> </div>

            </div>
        </main>

        <footer class="grid-footer p-3 m-0 text-sm-start" style="grid-area: footer">
            <center class="text-gray-200">2010 - 2022 Jerry Chaos</center>
        </footer>


        <div id="ID_main_content_widget_tool"
            class="flex justify-center fixed bottom-[-50px] pointer-events-none select-none transition-bottom">

            <div class="flex w-fit flex-nowrap bg-gray-400  px-3 py-2 rounded-lg -bottom-[50px]"
                style="pointer-events: all;">
                <button id="tool_up" type="button" class="px-3 py-1 rounded hover:bg-slate-500">
                    <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"
                        xmlns="http://www.w3.org/2000/svg">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                            d="M8 7l4-4m0 0l4 4m-4-4v18">
                        </path>
                    </svg>
                </button>
                <button id="tool_down" type="button" class="px-3 py-1 rounded hover:bg-slate-500">
                    <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"
                        xmlns="http://www.w3.org/2000/svg">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                            d="M16 17l-4 4m0 0l-4-4m4 4V3"></path>
                    </svg>
                </button>
                <button id="tool_focus" type="button" class="px-3 py-1 rounded hover:bg-slate-500">
                    <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"
                        xmlns="http://www.w3.org/2000/svg">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                            d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path>
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                            d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z">
                        </path>
                    </svg>
                </button>
                <button id="tool_delete" type="button" class="px-3 py-1 rounded hover:bg-slate-500">
                    <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"
                        xmlns="http://www.w3.org/2000/svg">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                            d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16">
                        </path>
                    </svg>
                </button>
                <button id="tool_close" type="button" class="px-3 py-1 rounded hover:bg-slate-500">
                    <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"
                        xmlns="http://www.w3.org/2000/svg">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12">
                        </path>
                    </svg>
                </button>
            </div>
        </div>


    </div>
</body>

<template id="ID_tpl_modal">
    <div
        class="scrollbar bg-gray-900 bg-opacity-50 overflow-y-auto overflow-x-hidden fixed top-0 right-0 left-0 z-50 min-w-full min-h-full justify-center items-center flex">
        <button modal-close type="button"
            class="absolute top-4 right-4 text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm p-1.5 ml-auto inline-flex items-center dark:hover:bg-gray-600 dark:hover:text-white">
            <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
                <path fill-rule="evenodd"
                    d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
                    clip-rule="evenodd"></path>
            </svg>
        </button>
    </div>
</template>

<template id="ID_tpl_dialog">
    <div
        class="scrollbar bg-gray-900 bg-opacity-50 overflow-y-auto overflow-x-hidden fixed top-0 right-0 left-0 z-50 min-w-full min-h-full justify-center items-center flex">
        <div class="bg-white rounded-lg shadow dark:bg-gray-700 max-w-2xl p-6 w-[450px]">
            <div class="flex justify-between items-start rounded-t border-b dark:border-gray-600">
                <h3 dialog-title class="text-xl font-semibold text-gray-900 dark:text-white">
                    Caption
                </h3>
                <button dialog-close type="button"
                    class="text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm p-1.5 ml-auto inline-flex items-center dark:hover:bg-gray-600 dark:hover:text-white">
                    <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
                        <path fill-rule="evenodd"
                            d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
                            clip-rule="evenodd"></path>
                    </svg>
                </button>
            </div>
            <div dialog-content> </div>
        </div>
    </div>
</template>

<template id="ID_tpl_property">
    <div class="bg-white rounded-lg shadow dark:bg-gray-700 max-w-2xl p-6 w-[450px]">
        <div class="flex justify-between items-start rounded-t border-b dark:border-gray-600">
            <h3 property-title class="text-xl font-semibold text-gray-900 dark:text-white">
                Caption
            </h3>
            <button property-close type="button"
                class="text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm p-1.5 ml-auto inline-flex items-center dark:hover:bg-gray-600 dark:hover:text-white">
                <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
                    <path fill-rule="evenodd"
                        d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
                        clip-rule="evenodd"></path>
                </svg>
            </button>
        </div>

        <div class="">
            <div class="my-2">
                <label class="block mb-2 text-sm font-medium text-gray-900 dark:text-gray-300">Name</label>
                <input property-name type="text"
                    class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
                    placeholder="Name" required />
            </div>

            <div class="my-2">
                <label class="block mb-2 text-sm font-medium text-gray-900 dark:text-gray-300">Tags</label>
                <div property-tag
                    class="p-1.5 bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 w-full dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" />
            </div>

            <div class="flex gap-4 items-center place-content-center my-2">
                <input property-createTime type="date"
                    class="flex-grow bg-gray-50 border border-gray-300 text-gray-900 sm:text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
                    placeholder="Select create date" />

                <input property-modifyTime type="date"
                    class="flex-grow bg-gray-50 border border-gray-300 text-gray-900 sm:text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
                    placeholder="Select modify date" />

            </div>

            <div class="flex gap-4 items-center place-content-center my-2">
                <div class="flex items-center flex-grow">
                    <input id="checkboxa" type="checkbox"
                        class="w-4 h-4 text-blue-600 bg-gray-100 rounded border-gray-300 focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600" />
                    <label for="checkboxa"
                        class="ml-2 text-sm font-medium text-gray-900 dark:text-gray-300">publish</label>
                </div>
                <div class="flex items-center flex-grow">
                    <input id="checkboxb" type="checkbox"
                        class="w-4 h-4 text-blue-600 bg-gray-100 rounded border-gray-300 focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600" />
                    <label for="checkboxb" class="ml-2 text-sm font-medium text-gray-900 dark:text-gray-300">TOC</label>
                </div>
                <div class="flex items-center flex-grow">
                    <input id="checkboxc" type="checkbox"
                        class="w-4 h-4 text-blue-600 bg-gray-100 rounded border-gray-300 focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600" />
                    <label for="checkboxc"
                        class="ml-2 text-sm font-medium text-gray-900 dark:text-gray-300">property</label>
                </div>
            </div>

            <div class="my-2">
                <label class="block mb-2 text-sm font-medium text-gray-900 dark:text-gray-300">description</label>
                <textarea property-description rows="4"
                    class="block p-2.5 w-full text-sm text-gray-900 bg-gray-50 rounded-lg border border-gray-300 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
                    placeholder="description ..."></textarea>
            </div>
        </div>

        <div
            class="flex items-center pt-2 space-x-2 justify-end rounded-b border-t border-gray-200 dark:border-gray-600">
            <button property-delete type="button"
                class="text-gray-500 bg-red-700 hover:bg-red-800 focus:ring-4 focus:outline-none focus:ring-blue-300 rounded-lg border border-gray-200 text-sm font-medium px-5 py-2.5 hover:text-gray-900 focus:z-10 dark:bg-gray-700 dark:text-gray-300 dark:border-gray-500 dark:hover:text-white dark:hover:bg-gray-600 dark:focus:ring-gray-600">
                Delete
            </button>
            <button property-confirm type="button"
                class="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800">
                Confirm
            </button>
            <button property-create type="button"
                class="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800">
                Create
            </button>
        </div>
    </div>
</template>

<template id="ID_tpl_search">
    <div class="absolute top-16 min-w-[70%]">
        <form>
            <label for="ID_slog_search"
                class="mb-2 text-sm font-medium text-gray-900 sr-only dark:text-gray-300">Search</label>
            <div class="relative">
                <div class="flex absolute inset-y-0 left-0 items-center pl-3 pointer-events-none">
                    <svg class="w-5 h-5 text-gray-500 dark:text-gray-400" fill="none" stroke="currentColor"
                        viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                            d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path>
                    </svg>
                </div>
                <input search-input type="search" id="ID_slog_search"
                    class="block p-4 pl-10 w-full text-sm text-gray-900 bg-gray-50 rounded-lg border border-gray-300 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
                    placeholder="Search Mockups, Logos..." required="">
                <button type="submit"
                    class="text-white absolute right-2.5 bottom-2.5 bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-4 py-2 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800">Search</button>
            </div>
        </form>
        <div search-result class="mt-4 w-full text-sm font-medium text-gray-900 bg-white border border-gray-200 rounded-lg dark:bg-gray-700
            dark:border-gray-600 dark:text-white">
        </div>
    </div>
    <a href="javascript:;"
        class="block w-full px-4 py-2 text-white bg-blue-700 border-b border-gray-200 rounded-t-lg cursor-pointer dark:bg-gray-800 dark:border-gray-600">
        <div search-result-name></div>
        <div search-result-desc></div>
        <span search-result-tag></span><span search-result-score></span>
    </a>
</template>

<template id="ID_tpl_page_list_item">
    <div class="w-full">
        <a item href="javascript:;" class="flex content-center items-center pr-2 slog_page_list_item_bg_color">
            <div item-indicator class="w-1 bg-red-300 h-6 mr-2"></div>
            <div item-name class="w-full text-slate-500 hover:text-slate-800">caption</div>
            <div item-collapser class="transition-transform rotate-90 w-4 h-4" aria-expanded='true'>
                <svg xmlns="http://www.w3.org/2000/svg"
                    class=" stroke-slate-500 hover:stroke-slate-800 hover:bg-slate-500 hover:rounded" width="100%"
                    height="100%" viewBox="0 0 16 16">
                    <path fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                        d="M5 14l6-6-6-6" />
                </svg>
            </div>
        </a>
        <div item-container class="overflow-hidden"></div>
    </div>
</template>

<template id="ID_login">
    <div class="relative p-4 w-full max-w-md h-full md:h-auto">
        <!-- Modal content -->
        <div class="relative bg-white rounded-lg shadow dark:bg-gray-700">
            <button id="ID_close" type="button"
                class="absolute top-3 right-2.5 text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm p-1.5 ml-auto inline-flex items-center dark:hover:bg-gray-800 dark:hover:text-white"
                data-modal-toggle="authentication-modal">
                <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
                    <path fill-rule="evenodd"
                        d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
                        clip-rule="evenodd"></path>
                </svg>
            </button>
            <div class="p-6 lg:px-8">
                <h3 class="mb-4 text-xl font-medium text-gray-900 dark:text-white">Sign in to our platform</h3>
                <form class="space-y-6" action="#">
                    <div>
                        <label for="email" class="block mb-2 text-sm font-medium text-gray-900 dark:text-gray-300">Your
                            email</label>
                        <input type="email" name="email" id="email"
                            class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-600 dark:border-gray-500 dark:placeholder-gray-400 dark:text-white"
                            placeholder="name@company.com" required>
                    </div>
                    <div>
                        <label for="password"
                            class="block mb-2 text-sm font-medium text-gray-900 dark:text-gray-300">Your
                            password</label>
                        <input type="password" name="password" id="password" placeholder="••••••••"
                            class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-600 dark:border-gray-500 dark:placeholder-gray-400 dark:text-white"
                            required>
                    </div>
                    <div class="flex justify-between">
                        <div class="flex items-start">
                            <div class="flex items-center h-5">
                                <input id="remember" type="checkbox" value=""
                                    class="w-4 h-4 bg-gray-50 rounded border border-gray-300 focus:ring-3 focus:ring-blue-300 dark:bg-gray-600 dark:border-gray-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800"
                                    required>
                            </div>
                            <label for="remember"
                                class="ml-2 text-sm font-medium text-gray-900 dark:text-gray-300">Remember me</label>
                        </div>
                        <a href="#" class="text-sm text-blue-700 hover:underline dark:text-blue-500">Lost Password?</a>
                    </div>
                    <button type="submit"
                        class="w-full text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800">Login
                        to your account</button>
                    <div class="text-sm font-medium text-gray-500 dark:text-gray-300">
                        Not registered? <a href="#" class="text-blue-700 hover:underline dark:text-blue-500">Create
                            account</a>
                    </div>
                </form>
            </div>
        </div>
    </div>
</template>

<template id="ID_tpl_widget">
    <section class="flex my-10">
        <div ui-menu class="w-8 h-fit flex">
            <button ui-create type="button" data-slog-menu-item="0x0008"
                class="h-fit text-slate-200 hover:text-slate-400 hover:opacity-100 cursor-pointer opacity-0">
                <svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4" fill="currentColor" viewBox="0 0 16 16">
                    <path fill-rule="evenodd"
                        d="M8 2a.5.5 0 0 1 .5.5v5h5a.5.5 0 0 1 0 1h-5v5a.5.5 0 0 1-1 0v-5h-5a.5.5 0 0 1 0-1h5v-5A.5.5 0 0 1 8 2Z" />
                </svg>
            </button>
            <button ui-toggle type="button" class="h-fit text-slate-200 hover:text-slate-400 cursor-pointer"
                data-slog-menu-item="0x0001"><svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4" fill="currentColor"
                    viewBox="0 0 16 16">
                    <path fill-rule="evenodd"
                        d="M2.5 12a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5z" />
                </svg>
            </button>
        </div>
        <div ui-content class="flex-grow"></div>
    </section>
</template>

<template id="ID_tpl_edit_pane_upload">
    <div class="flex justify-center items-center w-full h-[200px] border-[1px] bg-slate-100 rounded-md">
        <label for="dropzone-file"
            class="flex flex-col justify-center items-center w-4/5 h-[90%] bg-gray-50 rounded-lg border-2 border-gray-300 border-dashed cursor-pointer dark:hover:bg-bray-800 dark:bg-gray-700 hover:bg-gray-100 dark:border-gray-600 dark:hover:border-gray-500 dark:hover:bg-gray-600">
            <div class="flex flex-col justify-center items-center pt-5 pb-6">
                <svg class="mb-3 w-10 h-10 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"
                    xmlns="http://www.w3.org/2000/svg">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                        d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12">
                    </path>
                </svg>
                <p class="mb-2 text-sm text-gray-500 dark:text-gray-400"><span class="font-semibold">Click to
                        upload</span> or drag and drop
                </p>
                <p class="text-xs text-gray-500 dark:text-gray-400">SVG, PNG, JPG or GIF
                    (MAX. 800x400px)</p>
            </div>
            <input id="dropzone-file" type="file" class="hidden">
        </label>
    </div>
</template>

<template id="ID_tpl_view_pane">
    <div class="w-full text-gray-900"> </div>
</template>

<template id="ID_tpl_view_pane_img">
    <figure class="w-full text-gray-900 flex flex-col justify-center items-center">
        <img src="./test/assets/code.jpg" alt="Elephant at sunset" class="shadow-lg rounded h-auto border-none w-full">
        <figcaption>An elephant at sunset</figcaption>
    </figure>
</template>

<template id="ID_tpl_view_pane_code">
    <div class="w-full text-gray-900 slog-scroll-horizontal">
        <pre><code></code></pre>
    </div>
</template>

<template id="ID_tpl_view_pane_executable">
    <div class="w-full text-gray-900">
        <label class="text-slate-200">
            no content to display.
        </label>
    </div>
</template>

<template id="ID_tpl_view_pane_subpage">
    <div class="w-full text-gray-900">
        <ol class="relative border-l border-gray-200 dark:border-gray-700">
            <li class="mb-10 ml-6">
                <span
                    class="flex absolute -left-3 justify-center items-center w-6 h-6 bg-blue-200 rounded-full ring-8 ring-white dark:ring-gray-900 dark:bg-blue-900">
                    <svg class="w-3 h-3 text-blue-600 dark:text-blue-400" fill="currentColor" viewBox="0 0 20 20"
                        xmlns="http://www.w3.org/2000/svg">
                        <path fill-rule="evenodd"
                            d="M6 2a1 1 0 00-1 1v1H4a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V6a2 2 0 00-2-2h-1V3a1 1 0 10-2 0v1H7V3a1 1 0 00-1-1zm0 5a1 1 0 000 2h8a1 1 0 100-2H6z"
                            clip-rule="evenodd"></path>
                    </svg>
                </span>
                <h3 class="flex items-center mb-1 text-lg font-semibold text-gray-900 dark:text-white">Flowbite
                    Application UI v2.0.0 </h3>
                <time class="block mb-2 text-sm font-normal leading-none text-gray-400 dark:text-gray-500">Released on
                    January 13th, 2022</time>
                <p class="mb-4 text-base font-normal text-gray-500 dark:text-gray-400">Get access to over 20+ pages
                    including a dashboard layout, charts, kanban board, calendar, and pre-order E-commerce &amp;
                    Marketing pages.</p>
            </li>
            <li class="mb-10 ml-6">
                <span
                    class="flex absolute -left-3 justify-center items-center w-6 h-6 bg-blue-200 rounded-full ring-8 ring-white dark:ring-gray-900 dark:bg-blue-900">
                    <svg class="w-3 h-3 text-blue-600 dark:text-blue-400" fill="currentColor" viewBox="0 0 20 20"
                        xmlns="http://www.w3.org/2000/svg">
                        <path fill-rule="evenodd"
                            d="M6 2a1 1 0 00-1 1v1H4a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V6a2 2 0 00-2-2h-1V3a1 1 0 10-2 0v1H7V3a1 1 0 00-1-1zm0 5a1 1 0 000 2h8a1 1 0 100-2H6z"
                            clip-rule="evenodd"></path>
                    </svg>
                </span>
                <h3 class="mb-1 text-lg font-semibold text-gray-900 dark:text-white">Flowbite Figma v1.3.0</h3>
                <time class="block mb-2 text-sm font-normal leading-none text-gray-400 dark:text-gray-500">Released on
                    December 7th, 2021</time>
                <p class="text-base font-normal text-gray-500 dark:text-gray-400">All of the pages and components are
                    first designed in Figma and we keep a parity between the two versions even as we update the project.
                </p>
            </li>
            <li class="mb-10 ml-6">
                <span
                    class="flex absolute -left-3 justify-center items-center w-6 h-6 bg-blue-200 rounded-full ring-8 ring-white dark:ring-gray-900 dark:bg-blue-900">
                    <svg class="w-3 h-3 text-blue-600 dark:text-blue-400" fill="currentColor" viewBox="0 0 20 20"
                        xmlns="http://www.w3.org/2000/svg">
                        <path fill-rule="evenodd"
                            d="M6 2a1 1 0 00-1 1v1H4a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V6a2 2 0 00-2-2h-1V3a1 1 0 10-2 0v1H7V3a1 1 0 00-1-1zm0 5a1 1 0 000 2h8a1 1 0 100-2H6z"
                            clip-rule="evenodd"></path>
                    </svg>
                </span>
                <h3 class="mb-1 text-lg font-semibold text-gray-900 dark:text-white">Flowbite Library v1.2.2</h3>
                <time class="block mb-2 text-sm font-normal leading-none text-gray-400 dark:text-gray-500">Released on
                    December 2nd, 2021</time>
                <p class="text-base font-normal text-gray-500 dark:text-gray-400">Get started with dozens of web
                    components and interactive elements built on top of Tailwind CSS.</p>
            </li>
        </ol>
    </div>
</template>

<template id="ID_tpl_edit_pane">
    <div class='w-full h-auto border-slate-50 border-[1px] bg-slate-50 p-1 rounded font-normal empty:before:content-[attr(placeholder)] empty:before:text-slate-300'
        contenteditable placeholder="click to input ...">
    </div>
</template>

<template id="ID_tpl_tag">
    <span tag-item
        class="bg-blue-100 text-blue-800 text-xs font-semibold px-2.5 rounded dark:bg-blue-200 dark:text-blue-800">
        Default </span>
    <button type="button" class="hover:bg-blue-400 w-4 h-4">
        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
            <path
                d="M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708z" />
        </svg>
    </button>
    <div class="page_tag_con flex flex-wrap items-center justify-evenly"> </div>
</template>

<template id="ID_tpl_toc">
    <ul class="text-slate-400 list-disc"> </ul>
    <li class="text-xl hover:text-slate-500"> <a></a> </li>
    <li class="text-base hover:text-slate-500"> <a></a> </li>
    <li class="text-sm hover:text-slate-500"> <a></a> </li>
</template>

<template id="ID_tpl_selector">
    <div class="p-4 max-w-sm bg-white rounded-lg border border-gray-200 shadow-md sm:p-6 lg:p-8"> </div>
    <a href="javascript:;"
        class="flex flex-col items-center bg-white rounded-lg border shadow-md md:flex-row md:max-w-xl hover:bg-gray-100">
        <img class="object-cover w-full h-96 rounded-t-lg md:h-auto md:w-48 md:rounded-none md:rounded-l-lg"
            src="/assets/code.jpg">
        <div class="flex flex-col justify-between p-4 leading-normal">
            <h5 selector-name class="mb-2 text-2xl font-bold tracking-tight text-gray-900 dark:text-white"> HTML </h5>
            <p selector-disc class="mb-3 font-normal text-gray-700 dark:text-gray-400">you can use what ever you want
                HTML tags to
                layout your article</p>
        </div>
    </a>
</template>

<script type="module">
    console.log("slog start.");
    import('./js/index.bundle.js').then((m) => {
    });

    let _m = undefined;
    let _uiLogin;
    let _uiProperty;
    let _uiSearch;
    let _uiWidgetTool;
    let _uiPageProperty;
    let _uiPageTOC;
    let _uiSidebar;
    let _uiMainMenu;
    let _uiSelector;

    function _Toggle(ui) {
        ui._b ? ui.Hide() : ui.Show();
        ui._b = !ui._b;
    }

    window.onkeypress = logKey;
    function logKey(e) {
        if (!_m) return;
        let _v, _e, _w, _p;
        // log.textContent += ` ${e.code}`;
        console.log(e.code);
        switch (e.code) {
            case "KeyL":
                _Toggle(_uiLogin);
                break;
            case "KeyP":
                _Toggle(_uiProperty);
                break;
            case "KeyA":
                _Toggle(_uiPageProperty);
                break;
            case "Slash":
                _Toggle(_uiSearch);
                break;
            case "KeyE":
                _Toggle(_uiWidgetTool);
                break;
            case "KeyT":
                _Toggle(_uiPageTOC);
                break;
            case "KeyS":
                _Toggle(_uiSelector);
                break;
            case "KeyI":
                const _pl = _m.UIPageListItem();
                document.body.querySelector("#ID_sidebar_content_tree").append(_pl.element);
                if (Math.random() > 0.5) _pl.Active();
                else _pl.Deactive();
                if (Math.random() > 0.5) _pl.Collapse();
                else _pl.Expand();
                if (Math.random() > 0.5) _pl.HideCollaperButton();
                else _pl.ShowCollaperButton();
                break;
            case "KeyW":
                _v = Math.random() > 0.5;
                _w = _m.UIWidget();
                _w._toggle = _v;
                document.body.querySelector("#ID_main_content_group").append(_w.element);

                _p = _m.UIPaneView();
                _w.SetPane(_p);
                _p.SetHTML(
                    `<div><h2 id="S-6d8787bd-0bf8-4ab6-8ec1-dde9ef734610">Contact Infos</h2>
<ul>
<li>Email: <a href="mailto:jerry-chaos@outlook.com">jerry-chaos@outlook.com</a></li>
<li>GitHub: github.com/zspark</li>
<li>GitHub: github.com/zspark</li>
<li>GitHub: github.com/zspark</li>
<li>The classic and still relevant book is “An Introduction to Ray Tracing” (Edited by A. Glassner, Academic Press, 1989).</li>
<li>A very detailed beginner book is 'Ray Tracing from the Ground Up' (K. Suffern, AK Peters, 2007).</li>
<li>GitHub: github.com/zspark</li>
<li>A concise description of ray tracing is in “Fundamentals of Computer Graphics” (P. Shirley and S. Marschner, AK Peters, 2009).</li>
<li>A general discussion of realistic batch rendering algorithms is in 'Advanced Global Illumination' (P. Dutré, P. Bekaert, K. Bala, AK Peters, 2006).</li>
<li>A great deal of detailed information on ray tracing and algorithms that use ray tracing is in 'Physically Based Rendering' (M. Pharr and G.  Humphreys, Morgan Kaufmann, 2004).</li>
<li>A detailed description of photon mapping is in “Realistic Image Synthesis Using Photon Mapping” (H. Jensen, AK Peters, 2001).</li>
<li>GitHub: github.com/zspark</li>
<li>A discussion of using ray tracing interactively for picking and collision detection, as well as a detailed discussion of shading and ray-primitive intersection is in 'Real-Time Rendering' (T. Akenine-M?ller, E. Haines, N. Hoffman, AK Peters, 2008).</li>
<li>GitHub: github.com/zsparks</li>
</ul>
</div>`
                )
                break;
        }
    }

    function Init(ui) {
        ui.Show();
        ui._b = true;
    }

    import('./js/ui.js').then((m) => {
        _m = m;
        _uiLogin = _m.UILogin(); _uiLogin.closeBtn.addEventListener('click', e => { _uiLogin.Hide(); _uiLogin._b = false; }); _uiLogin._b = false;

        const _tg = _m.UITagGroup(true);
        _tg.Add(['aaa', 'bbb', 'ccc']);
        _uiProperty = _m.UIProperty();
        _uiProperty.SetButtonAction(e => { _uiProperty.Hide(); _uiProperty._b = false; }, e => { _uiProperty.Hide(); _uiProperty._b = false; });
        _uiProperty.SetTitle("Hello Property"); _uiProperty._b = false;
        _uiProperty.SetData("this is my name", new Date(), new Date(), 'this is description', true, false, true);
        _uiProperty.SetTagGroup(_tg);

        _uiSelector = _m.UISelector();
        Init(_uiSelector);


        _uiSearch = _m.UISearch(); _uiSearch.closeBtn.addEventListener('click', e => { _uiSearch.Hide(); _uiSearch._b = false; }); _uiSearch._b = false;
        _uiWidgetTool = _m.UIWidgetTool();
        //_uiMainMenu = _m.UIContentMenu(); _uiMainMenu.Hide();
        _uiSidebar = _m.UISidebar();
        _uiPageTOC = _m.UIPageTOC(); Init(_uiPageTOC);
        _Toggle(_uiPageTOC);
        _uiPageProperty = _m.UIPageProperty(() => { console.log("page property clicked"); }, () => { console.log("page create clicked"); });
        _uiPageProperty.SetData('Hello World', new Date().toDateString(), 'wo shi ni ba ba.'); Init(_uiPageProperty);

        const _uiTagGroup = _m.UITagGroup((text) => {
            const _e = _m.UITag(text);
            if (Math.random() > 0.5) _e.ShowDeleteBtn(e => { console.log("tag clicked."); })
            _uiTagGroup.Add(_e);
        });
        document.body.querySelector("#ID_main_summary_tag").append(_uiTagGroup.element);
    });
</script>

</html>